<html>
<head>
<script src="../plugins/jquery/jquery-1.5.2.min.js"></script>
<script src="../plugins/roundabout/jquery.easing.min.js"></script>
<script src="../plugins/roundabout/jquery.event.drag.min.js"></script>
<script src="../plugins/roundabout/jquery.event.drop.min.js"></script>
<script src="../plugins/roundabout/jquery.smooth-scroll.min.js"></script>
<script src="../plugins/roundabout/jquery.roundabout.js"></script>
<style>
.r-slide{
padding: 5px;
position: relative;
width: 320px;
overflow: hidden;
}
.r-slide ul {
	list-style: none;
	padding: 0;
	height: 100px;
}
.r-slide li {
	float:left;
	height: 100px;
	width: 200px;
	text-align: center;
	cursor: pointer;
}
.r-slide li img {
	width: 100%;
}
.r-slide li.roundabout-in-focus {
	cursor: default;
}
.r-slide .prev{
width: 5px;
background-color: white;
height: 100px;
display: block;
position: absolute;
top: 0px;
left: 58px;
z-index: 300;
}
.r-slide .next{
width: 5px;
background-color: white;
height: 100px;
display: block;
position: absolute;
top: 0px;
left: 263px;
z-index: 300;
}
</style>
</head>
<body>
<div class="r-slide">
<ul id="sample-roundabout">
<li>
	<a href="#"><img alt="" src="../../upload/image/201301/82a78c4b62f64754b842ef7c1bdff978.jpeg"></a>
</li>
<li>
	<img alt="" src="../../upload/image/201301/9e82dd0415de432fa76476f1d24abd32.jpeg">
</li>
<li>
	<img alt="" src="../../upload/image/201301/0e6765e38ddc4203b3bab5a39c80283d.jpeg">
</li>
<li>
	<img alt="" src="../../upload/image/201301/12bf37c7561f4751a25d12202d7c73f5.jpeg">
</li>
</ul>
<b class="prev"></b>
<b class="next"></b>
</div>
<script>
var rd = null;
$(function(){
	// roundabout
	rd = $("#sample-roundabout").roundabout({
		tilt: 0.4,
		minScale: 0.6,
		minOpacity: 1,
		duration: 400,
		startingChild:0,
		easing: 'easeOutQuad',
		enableDrag: true,
		dropEasing: 'easeOutBounce',
		dropCallback: showTime,
		clickToFocusCallback: showTime
	}, function() {
		$(this).fadeTo(500, 1);
	});
	
});
//展示活动时间
function showTime(){
	console.log('show time',rd.roundabout("getChildInFocus"));
}
</script>
</body>
</html>